<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
         <tree-node :treeNode="company" :isRoot="true" @addDepts="addDepts"></tree-node>
        <!-- 树形结构 -->
        <el-tree :data="departs" :props="defaultProps" @node-click="handleNodeClick">
          <tree-node 
          slot-scope="{ data }" 
          :treeNode="data" 
          @delDepts="getDepartments" 
          @addDepts="addDepts" 
          @editDepts="editDepts"></tree-node>
        </el-tree>
      </el-card>
      <add-dept 
      ref="editDepts"
      :showDialog.sync="showDialog" 
      :tree-node ="node" 
      @addDepts="getDepartments">
      </add-dept>
    </div>
  </div>
</template>
<script>
import treeNode from "./component/tree-tools.vue"
import { getDepartments } from "@/api/departments"
import { tranListToTreeData } from "@/utils/index"
import AddDept from './component/add-dept.vue'
export default {
  components: {
    treeNode,
    AddDept,
  },
  data() {
      return {
        company: {name:"前端无限有限公司", manager: "负责人", id:""},
        defaultProps: {
          label: "name"
        },
        departs: [],
        showDialog: false,
        node: null,
      };
    },
    created() {
      this.getDepartments()
    },
    methods: {
       handleNodeClick(data) {
        // console.log(data);
      },
      async getDepartments () {
        let res = await getDepartments();
        // console.log(res);
        this.departs = tranListToTreeData(res.depts, "");
      },
      // 编辑部门
      editDepts(node) {
        this.showDialog = true;
        this.node = node;
        this.$refs.editDepts.getDepartDetail(node.id);
      },
      // 增加部门
      addDepts(node) {
        this.showDialog = true;
        this.node = node;
        // if(this.showDialog === true) {
        //   this.showDialog = false
        // }
      },
      async getDepartmentsAg() {
        let res = await getDepartments();
        console.log(res,"again");
      }
    }
};
</script>
<style scoped>
  .tree-card {
    padding: 30px 140px;
    font-size: 14px;
  }
</style>